
<template>
<div>
  
  <comp-header></comp-header>
  
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Hello, world!</h1>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p><a class="btn btn-primary btn-lg" @click="jump" role="button">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4" v-for="(b,i) in blogList">
        <h2>{{b.title}}</h2>
        <p class="h6">作者：{{b.userName}}</p>
        <p>{{b.content}} </p>
        <p><a class="btn btn-primary" href="" role="button">View details &raquo;</a></p>
      </div>
    </div>

    <hr>
    <footer>
      <p>&copy; Company 2017</p>
    </footer>
  </div> <!-- /container -->
</div>
</template>

<script>
import Vue from 'vue'
import CompHeader from './header.vue'
function get(url,data={}){
  return new Promise(( resolve, reject ) => {
      if (!url) {  
          reject('No Url');  
          return;  
      }
      $.ajax({
        url:url,
        type:'get',
        dataType:'JSON',
        data:data,
        success:res=>{
          resolve( res);  
        },
        error:err=>{
          reject(err);
        }
      })
  })
}
export default {
  data:function () {
    this.getBlogList();
    return {
      msg: 'Hello world!',
      blogList:[]
    }
  },
  components:{
    CompHeader
  },
  methods:{
    getBlogList:async function (){
      const res = await get('/blog/list');
      if(res.err==1){
        swal('',res.msg,'error');
        return 
      }
      this.blogList = res.blogList;
    },
    jump: function (){
      this.$root.chgComp('comp-test');
    }
  }

}
</script>
